<template>
  <!-- 基于cesium的大屏map -->
  <div class="cesium-map">
    <div id="cesiumContainer" :style="{ width: mapWidth }">
      <div id="slider">
        <div class="btn">
          |||
        </div>
      </div>
    </div>
    <!-- 缩放按钮-->
    <RightBottomBtn @scale="scale" />
    <!-- 地图模式切换-->
<!--    <RightTopBtn @layerClick="handleLayerClick" />-->
  </div>
</template>

<script>
import {
  initCesium,
  addLayer,
  addXTLayer1,
  addXTLayer2,
  defaultView,
  loadSiteEntities,
  destroyCesium,
  Measure,
  scaleMap,
  splitLayer,
  mapChange,
  loadTrainEntity,
  removeEnt
} from '@/utils/cesium'
// import { getSiteList, getSiteRepair } from '@/api/gis/basic'
import RightBottomBtn from './components/RightBottomBtn.vue'
import RightTopBtn from './components/RightTopBtn.vue'
import screenfull from 'screenfull'
let viewer = null
let currentLayer = []
let SH_L19_Layer = []
let env = process.env.VUE_APP_MAP_LINE
let trainEntity = null
export default {
  components: {
    RightBottomBtn,
    RightTopBtn
  },
  data() {
    return {
      siteFeatureCollection: [], // 线路点位
      lineFeatureCollection: [], // 线路段
      splitLayerIsStart: false,
      mapWidth: '100%'
    }
  },
  computed: {},
  watch: {},
  created() {
    env = process.env.VUE_APP_MAP_LINE
    if (!env) {
      env = 'out'
    }
    trainEntity = null
  },
  mounted() {
    screenfull.on('change', this.change)
    this.init()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {
    removeEnt(viewer, trainEntity)
    destroyCesium(viewer)
    currentLayer = []
    SH_L19_Layer = []
    viewer = null
    // if (screenfull.enabled) {
    screenfull.off('change', this.change)
    // }
    trainEntity = null
  }, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  methods: {
    init() {
      // viewer = initCesium("cesiumContainer");
      initCesium('cesiumContainer').then(res => {
        viewer = res
        currentLayer = addXTLayer2(viewer)
        // 内网添加
        if (env === 'inner') {
          SH_L19_Layer = addLayer(viewer)
        }
        defaultView(viewer)
        trainEntity = loadTrainEntity(viewer)
        Measure.init(viewer)
        splitLayer.init(viewer, 'slider')
      })
    },
    scale(type) {
      scaleMap(viewer, type)
    },
  }
}
</script>
<style lang="scss" scoped>
.cesium-map {
  width: 100%;
  // height: 36rem;
  height: 100%;
  position: relative;
  background-color: rgb(28, 87, 20);
  #cesiumContainer {
    // width: 100%;
    height: 100%;
  }
  #slider {
    position: absolute;
    left: 50%;
    display: none;
    top: 0px;
    background-color: #d3d3d3;
    width: 5px;
    height: 100%;
    z-index: 99;
    .btn {
      width: 1.6vw;
      height: 4vh;
      border-radius: 4px;
      background-color: #d3d3d3;
      position: absolute;
      top: 50%;
      left: calc(-0.8vw + 2.5px);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  #slider:hover {
    cursor: ew-resize;
  }
}
</style>
